// import React, { useRef, useEffect } from "react";

// const App = () => {
//   const box = useRef();
//   const ipt = useRef();

//   useEffect(() => {
//     console.log(box.current);
//   }, []);

//   const fn = () => {
//     console.log(ipt.current.value);
//   };

//   return (
//     <>
//       <h2>useRef</h2>
//       <div ref={box}>box</div>
//       <input type="text" ref={ipt} />
//       <button onClick={fn}>btn</button>
//     </>
//   );
// };

// export default App;

// import React, { useState, useEffect } from "react";

// const App = () => {
//   const [count, setCount] = useState(0);

//   useEffect(() => {
//     setTimeout(() => {
//       console.log("count", count);
//     }, 2000);
//   }, [count]);

//   return (
//     <>
//       <h2>useRef</h2>
//       <p>{count}</p>
//       <button onClick={() => setCount((v) => v + 1)}>++</button>
//       <button onClick={() => setCount((v) => v - 1)}>--</button>
//     </>
//   );
// };

// export default App;

import React, { useRef } from "react";

const App = () => {
  const count = useRef(0);
  const handleClick = (n) => {
    count.current = count.current + n;
    setTimeout(() => {
      console.log(count.current);
    }, 2000);
  };
  return (
    <>
      <h2>useRef</h2>
      <p>count: {count.current}</p>
      <button onClick={() => handleClick(1)}>++</button>
      <button onClick={() => handleClick(-1)}>--</button>
    </>
  );
};

export default App;
